<template>
<div class="idLayout">
    <div class="tagsBox">
        <div>
            <span class="title">客户姓名</span>
            <el-input v-model="tagsValue.uname" style="width: 300px;"/>
        </div>
        <div>
            <span class="title">入住状态</span>
            <el-select
                v-model="tagsValue.status"
                >
                <el-option label="已入住" value="1" />
                <el-option label="未入住" value="0" />
            </el-select>
        </div>

        <div>
            <span class="title">酒店名称</span>
            <el-input v-model="tagsValue.hotalName" style="width: 300px;"/>
        </div>

        <div>
            <span class="title">入住时间</span>
            <el-date-picker
                v-model="tagsValue.time"
                type="daterange"
                range-separator="To"
                start-placeholder="Start"
                end-placeholder="End"
                size="default"
            />
        </div>


        <div>
            <el-button type="primary" style="width:100%">查询</el-button>
        </div>

    </div>

    <el-card style="width:100%">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%;border: none; border-radius: 8px"
        >
            <el-table-column type="selection" />
            <el-table-column property="name" label="姓名" />
            <el-table-column property="type" label="类型" />
            <el-table-column property="status" label="状态">
                <template #default="scope">
                    <el-tag
                        :type="scope.row.status === '0'? 'danger' : 'success'"
                        disable-transitions
                    >{{ isStatus(scope.row.status) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="hotel" label="入住酒店" />
            <el-table-column property="pudate_time" label="入住时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="updataInfo(scope.row)">操作</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <el-card class="pagination" body-style="padding:0">
        <el-config-provider :locale="zhCn">
            <el-pagination  :page-size="20" 
                            :pager-count="11" 
                            layout="prev, pager, next, jumper" 
                            background 
                            :total="1000"
                            prev-text="上一页"
                            next-text="下一页"
                            />
        </el-config-provider>
    </el-card>
</div> 
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue'
import { kindsTag } from '@/components'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const tableData = reactive([
    { name:'张三', type: 'xx类型', status: '1', hotel: 'dghfiwhfuiwh', pudate_time:'2342242'},
    { name:'李四', type: 'lx类型', status: '0', hotel: 'dghfiwhfuiwh', pudate_time:'2342242'},
    { name:'王五', type: 'mx类型', status: '1', hotel: 'dghfiwhfuiwh', pudate_time:'2342242'},
    { name:'赵六', type: 'nx类型', status: '0', hotel: 'dghfiwhfuiwh', pudate_time:'2342242'},
    { name:'赵六', type: 'nx类型', status: '0', hotel: 'dghfiwhfuiwh', pudate_time:'2342242'},
    { name:'赵六', type: 'nx类型', status: '0', hotel: 'dghfiwhfuiwh', pudate_time:'2342242'},
    { name:'赵六', type: 'nx类型', status: '0', hotel: 'dghfiwhfuiwh', pudate_time:'2342242'},
    { name:'赵六', type: 'nx类型', status: '0', hotel: 'dghfiwhfuiwh', pudate_time:'2342242'},
    { name:'赵六', type: 'nx类型', status: '0', hotel: 'dghfiwhfuiwh', pudate_time:'2342242'},
    { name:'赵六', type: 'nx类型', status: '0', hotel: 'dghfiwhfuiwh', pudate_time:'2342242'}
])
const tags= reactive(
    { title:'状态', list: [ { name: '营业中', label: '0' }, { name: '未营业', label: '1' }] },
)
const tagsValue = reactive({
    uname:'',
    status:'',
    time:'',
    hotalName:''
})
function updataInfo(val:any) {
    console.log('你进入了修改',val);
}
const isStatus = computed(() => (val:string) => {
    if (val === '0') {
        return '未入住'
    } else {
        return '已入住'
    }
})
</script>

<style lang="scss" scoped>
@import url(../../assets/css/infoKinds.scss);
@import url(../../assets/css/changePagintoin.scss);
.idLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px;
    @include allBack;
}
.paginationBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-radius: 8px;
}
</style>